import React, {useState, useEffect} from 'react'
import { Table, Button, message, Modal, Tree } from 'antd'
import {
  DeleteOutlined,
  UnorderedListOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import axios from 'axios'

const {confirm} = Modal

export default function RoleList() {
  // 权限用户名
  const [dataSource, setdataSource] = useState([])
  // 模态框里的权限名
  const [rightList, setRightList] = useState([])
  // 选中的路径
  const [checkedKeys, setcheckedKeys] = useState([])
  // 模态框显示隐藏
  const [visible, setVisible] = useState(false);
  // 当前项id
  const [currentId, setcurrentId] = useState(0);

  useEffect(() => {
    axios.get('/roles').then(res => {
      // console.log('999', res.data);
      setdataSource(res.data)
    })
  }, [])
  useEffect(() => {
    axios.get('/rights?_embed=children').then(res => {
      // console.log(res.data);
      setRightList(res.data)
    })
  }, [])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button type="primary" onClick={()=>removeConfim(item)} danger shape="circle" icon={<DeleteOutlined />} />
          <Button type="primary" shape="circle" onClick={()=>showModal(item)} icon={<UnorderedListOutlined />} />
        </div>
      }
    },
  ]
  // 删除事件二次确认
  const removeConfim = item => {
    confirm({
      title: '您确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      cancelText: '取消',
      onOk() {
        removeMethed(item)
      },
      onCancel() {},
    });
  }
  // 删除的函数
  const removeMethed = item => {
    console.log('33', item);
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/roles/${item.id}`).then(res => {
      if (res.status === 200) {
        message.success('删除成功');
      }
    })
  }
  // 打开模态框
  const showModal = item => {
    setVisible(true);
    setcurrentId(item.id)
    setcheckedKeys(item.rights)
  };
  // 模态框里面选中状态改变事件
  const checkChange = checkedKeys => {
    setcheckedKeys(checkedKeys)
  }
  // 模态框确认事件
  const handleOk = () => {
    setVisible(false);
    setdataSource(dataSource.map(item => {
      if (item.id === currentId) {
        return {
          ...item,
          rights: checkedKeys
        }
      }
      return item
    }))
    axios.patch(`/roles/${currentId}`, {
      rights: checkedKeys
    }).then(res => {
      if (res.status === 200) {
        message.success('修改成功');
      }
    })
    
    // setTimeout(() => {
    //   setVisible(false);
    //   setConfirmLoading(false);
    // }, 2000);
  };
  // 模态框关闭事件
  const handleCancel = () => {
    setVisible(false);
  };
  
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{
        pageSize: 10
      }} rowKey={item => item.id}></Table>
      <Modal
        title="权限分配"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText="取消"
        closable={false}
        maskClosable={false}
        checkStrictly={true}
      >
        <Tree
          checkable
          checkedKeys={checkedKeys}
          treeData={rightList}
          onCheck={checkChange}
        />
      </Modal>
    </div>
  )
}
